<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script src='https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css ' rel='stylesheet' />
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css'
        type='text/css' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js'></script>
    <script src="https://unpkg.com/@antv/l7"></script>
    <script src="https://unpkg.com/@antv/l7-draw"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.6.0/css/all.css" rel="stylesheet">
    <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=dfb26d98b5b3f2ca63eca2a2284366df">
    </script> -->
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>
</head>

<body>

    <div id="map"></div>

    <script>
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.GaodeMap({
                style: 'dark',
                center: [127.5671666579043, 7.445038892195569],
                zoom: 2.632456779444394,
            }),
        });
        scene.on('loaded', () => {
            fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
                .then((res) => res.json())
                .then((data) => {
                    console.log(data)
                    const layer = new L7.HeatmapLayer({})
                        .source(data)
                        .shape('heatmap')
                        .size('mag', [0, 1.0]) // weight映射通道
                        .style({
                            intensity: 2,
                            radius: 20,
                            rampColors: {
                                colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'].reverse(),
                                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
                            },
                        });
                    scene.addLayer(layer);
                });
        });

    </script>

</body>

</html>